<!DOCTYPE html>
{% load static %}
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于ESP32S3的实验室门禁系统设计与实现 - 注册</title>
    <style>
        /* 新增注册页专属样式 */
        .register-container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
            transform: translateY(0);
            transition: all 0.3s ease;
        }
        
        .register-container h2 {
            color: #1a73e8;
            margin-bottom: 30px;
            font-size: 2rem;
        }
        
        .form-group {
            margin-bottom: 20px;
            width: 90%;  /* 缩小容器宽度 */
            max-width: 320px;  
            margin-left: auto;
            margin-right: auto;
        }
        
        .form-group input {
            width: calc(100% - 24px); /* 减少右侧空白 */
            max-width: 280px;
            box-sizing: border-box;
            padding: 12px 16px;  /* 调整内边距 */
        }
            padding: 12px 20px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .form-group input:focus {
            border-color: #667eea;
            box-shadow: 0 0 8px rgba(102, 126, 234, 0.3);
        }
    </style>
    <link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}">
</head>
<body>
    <style>
        body {
            font-family: 'Segoe UI', system-ui;
            background-image: url("{% static 'images/ChatGPT_Image.png' %}");
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }
    </style>
    <div class="login-container register-container">
        <h2>用户注册</h2>
        {% if error %}
            <div class="error-message" style="color: #dc3545; margin-bottom: 15px;">{{ error }}</div>
        {% endif %}
        <form method="post">
            {% csrf_token %}
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password1">密码:</label>
                <input type="password" id="password1" name="password1" required>
            </div>
            <div class="form-group">
                <label for="password2">确认密码:</label>
                <input type="password" id="password2" name="password2" required>
            </div>
            <button type="submit" class="gradient-btn" style="width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 8px; color: white; font-size: 16px; cursor: pointer;">
                立即注册
            </button>
        </form>
        <p style="margin-top: 20px; color: #666;">已有账号？<a href="{% url 'login' %}" style="color: #1a73e8; text-decoration: none;">立即登录</a></p>
    </div>
</body>
</html>
